<template>
  <el-container>
    <el-header style="height: auto;">
      <el-page-header @back="back" style="margin-top: 10px;">
        <div style="font-weight:bold;padding-left:5px" slot="title">邮件标题</div>
        <template slot="content">
          <div class="container-fluid text-summary" style="font-weight:bold;font-size:14px;">
            <span class="text-summary">{{mailModel.title}}</span>
          </div>
        </template>
      </el-page-header>
    </el-header>
    <el-main>
      <el-container>
        <el-header style="height: auto;">
          <el-form :model="mailModel" label-width="100px">
            <el-row>
              <el-col :span=12>
                <el-form-item label="发件人">
                  <el-input v-model="mailModel.sender" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span=8>
                <el-form-item label="发送时间">
                  <el-input v-model="mailModel.sendTime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span=20>
                <el-form-item label="收件人">
                  <el-input v-model="mailModel.receiver" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span=10>
                <el-form-item label="抄送">
                  <el-input v-model="mailModel.ccList" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span=10>
                <el-form-item label="暗抄">
                  <el-input v-model="mailModel.bccList" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span=4>
                <el-form-item label-width="20px">
                  <el-popover placement="left" title="点击下载" width="400" trigger="hover">
                    <li style="list-style-type: none;" v-for="file in mailModel.attachments" :key="file.fileId">
                      <a @click="downloadAttach(file)" :title="file.fileName" class="text-summary">{{file.fileName}}</a>
                    </li>
                    <el-badge :value="mailModel.attachments && mailModel.attachments.length > 0 ? mailModel.attachments.length:0"  slot="reference">
                      <el-button type="primary" icon="el-icon-paperclip" title="附件" plain>附件</el-button>
                    </el-badge>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <el-main>
          <el-tabs v-model="activeName" @tab-click="tabClick">
            <el-tab-pane label="邮件内容" name="bodyContent">
              <mf-monacoEditor ref="bodyContent" v-model="mailModel.body" language="html" theme="vs-dark" readOnly ></mf-monacoEditor>
            </el-tab-pane>
            <el-tab-pane label="数据模型" name="dataContent">
              <mf-monacoEditor ref="dataContent" :value="dataContent" language="json" theme="vs-dark" readOnly ></mf-monacoEditor>
            </el-tab-pane>
            <el-tab-pane v-if="hasError" label="异常描述" name="errorContent">
              <mf-monacoEditor ref="errorContent" :value="mailModel.exception" language="text" theme="vs-dark" readOnly ></mf-monacoEditor>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-main>
    <el-footer>
      <el-form :model="mailModel" label-width="100px">
        <el-row>
          <el-col :span=12>
            <el-form-item label="发件账户">
              <el-input v-model="mailModel.accountName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="模板">
              <el-input v-model="mailModel.templateName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  props: {
    mailModel: {
      type: Object,
      default: {
        messageId: '',
        accountName: '',
        templateName: '',
        data: '',
        title: '',
        sender: '',
        sendTime: '',
        receiver: '',
        ccList: '',
        bccList: '',
        body: '',
        exception: ''
      }
    },
    hasError: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: "bodyContent",
      dataContent: null
    };
  },
  created() {},
  mounted() {},
  methods: {
    back() {
      this.$router.push({ name: "mail" });
    },
    downloadAttach(file){
      this.$service.file.download({data: {fileId: file.fileId}}).then((r)=>{});
    },
    tabClick(tab, event){

      this.$nextTick(() => {
        if (this.$refs.bodyContent)
          this.$refs.bodyContent.layout();
        if (this.$refs.dataContent)
          this.$refs.dataContent.layout();
        if (this.$refs.errorContent)
          this.$refs.errorContent.layout();

        if (this.activeName == 'dataContent'){
          if (this.mailModel && this.mailModel.data){
            let obj = JSON.parse(this.mailModel.data);
            this.dataContent = JSON.stringify(obj, null, 4);
          }
        }
      });

    }
  },
};
</script>
